<template>
  <div>
    <h2>示例1</h2>
    <p>
      导航抽屉主要用于存放您应用程序中页面的链接。 使用 null 作为其 v-model
      的初始值 将会将抽屉初始化为在移动设备上关闭，在桌面环境下打开。 通常使用
      nav 属性将抽屉与 v-list 组件配对。
    </p>
    <v-card height="400" width="256" class="mx-auto">
      <v-navigation-drawer permanent>
        <v-list-item>
          <v-list-item-content>
            <v-list-item-title class="title"> Application </v-list-item-title>
            <v-list-item-subtitle> subtext </v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>

        <v-divider></v-divider>

        <v-list dense nav>
          <v-list-item v-for="item in items" :key="item.title" link>
            <v-list-item-icon>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-item-icon>

            <v-list-item-content>
              <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>
    </v-card>

    <br />
    <h2>底部抽屉</h2>
    <p>
      使用 bottom
      参数，我们能够在移动设备上重新定位抽屉，让其从屏幕底部出来。这是另一种样式，只能遇到
      mobile-breakpoint 时激活。
    </p>
    <v-card class="mx-auto overflow-hidden" height="400" width="344">
      <v-system-bar color="deep-purple darken-3"></v-system-bar>

      <v-app-bar color="deep-purple accent-4" dark prominent>
        <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>

        <v-toolbar-title>My files</v-toolbar-title>

        <v-spacer></v-spacer>

        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-filter</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-dots-vertical</v-icon>
        </v-btn>
      </v-app-bar>

      <v-navigation-drawer
        mobile-breakpoint="xl"
        v-model="drawer"
        absolute
        bottom
        temporary
      >
        <v-list nav dense>
          <v-list-item-group
            v-model="group"
            active-class="deep-purple--text text--accent-4"
          >
            <v-list-item>
              <v-list-item-title>Foo</v-list-item-title>
            </v-list-item>

            <v-list-item>
              <v-list-item-title>Bar</v-list-item-title>
            </v-list-item>

            <v-list-item>
              <v-list-item-title>Fizz</v-list-item-title>
            </v-list-item>

            <v-list-item>
              <v-list-item-title>Buzz</v-list-item-title>
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </v-navigation-drawer>

      <v-card-text>
        The navigation drawer will appear from the bottom on smaller size
        screens.
      </v-card-text>
    </v-card>

    <br />
    <h2>悬停时扩展</h2>
    <p>
      将组件放置在 expand-on-hover 模式中，并在悬停时扩展开。 不 更改 v-main
      的内容区域。 宽度可以使用 mini-variant-width 属性来控制。
    </p>
    <div class="mx-12 px-12">
      <v-card>
        <v-navigation-drawer permanent expand-on-hover mini-variant-width="100">
          <v-list>
            <v-list-item class="px-2">
              <v-list-item-avatar>
                <v-img src="../assets/logo.png"></v-img>
              </v-list-item-avatar>
            </v-list-item>

            <v-list-item link>
              <v-list-item-content>
                <v-list-item-title class="title"> Test Name </v-list-item-title>
                <v-list-item-subtitle>Test_Name@gmail.com</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>
          </v-list>

          <v-divider></v-divider>

          <v-list nav dense>
            <v-list-item link>
              <v-list-item-icon>
                <v-icon>mdi-folder</v-icon>
              </v-list-item-icon>
              <v-list-item-title>My Files</v-list-item-title>
            </v-list-item>
            <v-list-item link>
              <v-list-item-icon>
                <v-icon>mdi-account-multiple</v-icon>
              </v-list-item-icon>
              <v-list-item-title>Shared with me</v-list-item-title>
            </v-list-item>
            <v-list-item link>
              <v-list-item-icon>
                <v-icon>mdi-star</v-icon>
              </v-list-item-icon>
              <v-list-item-title>Starred</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-navigation-drawer>
      </v-card>
    </div>

    <h2>背景图像</h2>
    <p>
      通过 src 属性将自定义背景应用于抽屉。 如果你需要自定义
      v-img的属性，你可以使用 img 插槽。
    </p>
    <v-card class="mx-auto" height="300" width="300">
      <v-navigation-drawer
        absolute
        dark
        src="../assets/bg-2.jpg"
        width="100%"
        permanent
      >
        <v-list>
          <v-list-item v-for="([icon, text], i) in bkgitems" :key="i" link>
            <v-list-item-icon>
              <v-icon>{{ icon }}</v-icon>
            </v-list-item-icon>

            <v-list-item-content>
              <v-list-item-title>{{ text }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>
    </v-card>

    <br />
    <h2>迷你模式</h2>
    <p>
      当使用 mini-variant 属性时，抽屉将会缩小(默认56px)，并隐藏除第一个元素外的
      v-list 内的所有内容。 在这个示例中，我们使用了 .sync
      修饰符，它允许我们以程序化的方式绑定抽屉的扩展/收缩。
    </p>
    <v-card>
      <v-navigation-drawer
        v-model="minidemodrawer"
        v-bind:mini-variant.sync="minidemo"
        permanent
      >
        <v-list-item class="mx-20 px-2">
          <v-list-item-avatar>
            <v-img src="../assets/logo.png"></v-img>
          </v-list-item-avatar>

          <v-list-item-title>John Leider</v-list-item-title>

          <v-btn icon @click.stop="minidemo = !minidemo">
            <v-icon>mdi-chevron-left</v-icon>
          </v-btn>
        </v-list-item>

        <v-divider></v-divider>

        <v-list dense>
          <v-list-item v-for="item in miniitems" :key="item.title" link>
            <v-list-item-icon>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-item-icon>

            <v-list-item-content>
              <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>
    </v-card>

    <br />
    <h2>永久浮动抽屉</h2>
    <p>
      默认情况下，导航抽屉有一个 1px 右边框，将其与内容分开。
      在这个例子中，我们要把抽屉从左边分离出来，让它自己浮动。 floating
      属性可移除右边的边框(如果使用 right 则移除左边框)。
    </p>
    <v-card class="pa-12" color="indigo darken-2" flat>
      <v-card elevation="12" width="256">
        <v-navigation-drawer floating permanent>
          <v-list dense rounded>
            <v-list-item v-for="item in floatingitems" :key="item.title" link>
              <v-list-item-icon>
                <v-icon>{{ item.icon }}</v-icon>
              </v-list-item-icon>

              <v-list-item-content>
                <v-list-item-title>{{ item.title }}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list>
        </v-navigation-drawer>
      </v-card>
    </v-card>

    <br />
    <h2>临时的</h2>
    <p>
      临时抽屉使用temporary属性，位于它的应用程序上方，并使用一个scrim（覆盖层）使背景变暗。
      在移动设备上默认模拟此抽屉行为。 在抽屉外点击将导致它关闭。
    </p>
    <v-sheet height="400" class="overflow-hidden" style="position: relative">
      <v-container class="fill-height">
        <v-row align="center" justify="center">
          <v-btn color="pink" dark @click.stop="tempdrawer = !tempdrawer">
            Toggle
          </v-btn>
        </v-row>
      </v-container>

      <v-navigation-drawer v-model="tempdrawer" absolute temporary>
        <v-list-item>
          <v-list-item-avatar>
            <v-img src="../assets/logo.png"></v-img>
          </v-list-item-avatar>

          <v-list-item-content>
            <v-list-item-title>John Leider</v-list-item-title>
          </v-list-item-content>
        </v-list-item>

        <v-divider></v-divider>

        <v-list dense>
          <v-list-item v-for="item in tempitems" :key="item.title" link>
            <v-list-item-icon>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-item-icon>

            <v-list-item-content>
              <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>
    </v-sheet>

    <br />
    <h2>彩色的抽屉</h2>
    <p>
      导航抽屉可以自定义，以适合任何应用程序的设计。 我们在这里使用 append
      插槽自定义背景颜色和附加的内容区域。
    </p>
    <v-card class="mx-auto" height="400" width="256">
      <v-navigation-drawer class="deep-purple accent-4" dark permanent>
        <v-list>
          <v-list-item v-for="item in appenditems" :key="item.title" link>
            <v-list-item-icon>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-item-icon>

            <v-list-item-content>
              <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>

        <template v-slot:append>
          <div class="pa-2">
            <v-btn block> Logout </v-btn>
          </div>
        </template>
      </v-navigation-drawer>
    </v-card>

    <br />
    <h2>组合抽屉</h2>
    <p>
      在此示例中，我们定义了一个自定义宽度来容纳嵌套抽屉。 我们使用 v-row
      确保抽屉和列表在水平方向彼此相邻。
    </p>
    <v-card class="mx-auto" height="300" width="430">
      <v-navigation-drawer permanent width="100%">
        <v-row class="fill-height" no-gutters>
          <v-navigation-drawer
            dark
            v-bind:mini-variant.sync='embeddedmini'
            mini-variant-width="56"
            permanent
          >
            <v-list-item class="px-2">
              <v-list-item-avatar>
                <v-img src="../assets/logo.png" @click.stop="embeddedmini = !embeddedmini"></v-img>
              </v-list-item-avatar>
            </v-list-item>

            <v-divider></v-divider>

            <v-list dense nav>
              <v-list-item v-for="item in embeddeditems" :key="item.title" link>
                <v-list-item-action>
                  <v-icon >{{ item.icon }}</v-icon>
                </v-list-item-action>

                <v-list-item-content>
                  <v-list-item-title>{{ item.title }}</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </v-list>
          </v-navigation-drawer>

          <v-list class="grow">
            <v-list-item v-for="link in embeddedlinks" :key="link" link>
              <v-list-item-title v-text="link"></v-list-item-title>
            </v-list-item>
          </v-list>
        </v-row>
      </v-navigation-drawer>
    </v-card>

    <!-- top div -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
      group: null,
      items: [
        { title: "Dashboard", icon: "mdi-view-dashboard" },
        { title: "Photos", icon: "mdi-image" },
        { title: "About", icon: "mdi-help-box" },
      ],
      bkgitems: [
        ["mdi-email", "Inbox"],
        ["mdi-account-supervisor-circle", "Supervisors"],
        ["mdi-clock-start", "Clock-in"],
      ],
      right: null,
      minidemodrawer: true,
      miniitems: [
        { title: "Home", icon: "mdi-home-city" },
        { title: "My Account", icon: "mdi-account" },
        { title: "Users", icon: "mdi-account-group-outline" },
      ],
      minidemo: true,
      floatingitems: [
        { title: "Home", icon: "mdi-view-dashboard" },
        { title: "About", icon: "mdi-forum" },
      ],
      tempdrawer: null,
      tempitems: [
        { title: "Home", icon: "mdi-view-dashboard" },
        { title: "About", icon: "mdi-forum" },
      ],
      appenditems: [
        { title: "Dashboard", icon: "mdi-view-dashboard" },
        { title: "Account", icon: "mdi-account-box" },
        { title: "Admin", icon: "mdi-gavel" },
      ],
      embeddeditems: [
        { title: "Home", icon: "mdi-view-dashboard" },
        { title: "About", icon: "mdi-forum" },
      ],
      embeddedlinks: ["Home", "Contacts", "Settings"],
      embeddedmini: true,
    };
  },
  watch: {
    group() {
      this.drawer = false;
    },
  },
};
</script>